<script setup>
import { ref, onMounted } from "vue";
import QRCode from 'qrcode';

import TopBar from "@/components/TopBar.vue";
import AuthModal from "@/components/AuthModal.vue";

import { detectDeviceType } from "@/utils";

const device = detectDeviceType();
const isMobile = ref(device !== "Desktop");
console.log(device, isMobile.value, 11);

const showQrcode = ref(false)
const qrCodeUrl = ref('')

// const generateQRCode = async() =>{
// 	try {
// 		// 生成二维码图片，并将其转换为Data URL
// 		qrCodeUrl.value = await QRCode.toDataURL(window.location.href);
// 	} catch (error) {
// 		console.error('生成二维码时出错:', error);
// 	}
// }

onMounted(() => {
	// generateQRCode()
})
</script>

<template>
  <div>
    <TopBar/>
    <router-view v-slot="{ Component }">
      <Suspense>
        <component :is="Component" />
      </Suspense>
    </router-view>
    <AuthModal ref="authModalRef"/>
    <div v-if="showQrcode" class="qrcode">
      <svg-icon icon-class="close" class="close" @click="showQrcode=false"/>
      <img src="@/assets/image/home/scan.png"/>
      <div>扫码预约门票</div>
    </div>
    <div class="create-ticket" @click="showQrcode=!showQrcode">免费预约门票</div>
  </div>
</template>

<style lang="less" scoped>
.qrcode {
  position: fixed;
  bottom: 120px;
	left: 16px;
  background-color: #F6F7F9;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0px 2px 10px 0px rgba(209,214,227,0.5);
  padding-bottom: 10px;
  .close {
    font-size: 16px;
    position: absolute;
    right: -6px;
    top: -3px;
    color: red;
    cursor: pointer;
  }
  img {
    padding-top: 5px;
    width: 150px;
    height: 150px;
  }
}
.create-ticket {
  background: #820000;
  color: #fff;
  height: 80px;
  font-size: 30px;
  letter-spacing: 12px;
  font-weight: 600;
  line-height: 80px;
  text-align: center;
  cursor: pointer;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
</style>
